<template>
  <div class="section-title">
    <p class="section-title-main">{{ title }}</p>
    <p class="section-title-sub">{{ subTitle }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    subTitle: {
      type: String,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.section-title-main {
  font-family: PingFangSC-Semibold !important;
  font-size: 24px !important;
  color: #000000 !important;
  line-height: 33px !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  margin: 0 !important;
  background: url('/images/title-bg-bar.png') no-repeat !important;
  background-size: 80px, 8px !important;
  background-position: 50% 80% !important;
}
.section-title-sub {
  font-size: 12px !important;
  color: #9b9b9b !important;
  line-height: 17px !important;
  letter-spacing: 0.25px !important;
  text-align: center !important;
  margin: 0 !important;
}
</style>
